<template>
	<view class="main">
		<u-navbar
		title="修改密码"
		title-size="34"
		back-icon-color="#ffffff"
		title-color="#ffffff"
		:border-bottom="false"
		:background="background">
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="180">
				<u-form-item label="旧密码" prop="oldpwd">
					<u-input v-model="form.oldpwd" placeholder="点击输入旧密码" />
				</u-form-item>
				<u-form-item label="新密码" prop="newpwd">
					<u-input v-model="form.newpwd" type="password" placeholder="6~20个字符"/>
				</u-form-item>
				<u-form-item label="新密码确认" prop="pwd">
					<u-input v-model="form.pwd" type="password" placeholder="请再次输入确认密码"/>
				</u-form-item>
			</u-form>
		</view>
		<button @click="submit" class="submit">提交</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				background: {
					backgroundColor:"#4A90E2"
				},
				status: 'loadmore',
				form: {
					oldpwd: '',
					newpwd: '',
					pwd: ''
				},
				rules: {
					oldpwd: [
						{ 
							required: true, 
							message: '请输入旧密码', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change','blur'],
						}
					],
					newpwd: [
						{
							required: true, 
							message: '请输入新密码', 
							trigger: 'change'
						},
						{
							min: 6, 
							message: '密码最少输入6位', 
							trigger: 'change'
						},
						{
							max: 20, 
							message: '密码最多只能设置20位', 
							trigger: 'change'
						}
					],
					pwd:[
						{ 
							required: true, 
							message: '两次密码不一致', 
							trigger: ['change'],
						},{
							validator: (rule, value, callback) => {
								if(value != this.form.newpwd)return false
								if(value === this.form.newpwd)return true
							},
							message: '两次密码不一致',
							trigger: 'change'
						}
					]
				}
			}
		},
		onShow() {
			
		},
		onLoad() {
			
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onPullDownRefresh() {
		    console.log('refresh');
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 1000);
		},
		methods:{
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.main{
		min-height: 100vh;
		background-color: #f9f9f9;
		.content{
			padding: 30rpx 30rpx 0 30rpx;
			background-color: #FFFFFF;
			/deep/.u-form-item:last-child{
				&::after{
					border: 0;
				}
			}
		}
		.submit{
			width: calc(100% - 60rpx);
			margin: 60rpx auto;
			height: 100rpx;
			background: #4A90E2;
			border-radius: 50rpx;
			font-size: 34rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 100rpx;
			&::after{
				border: 0;
			}
		}
	}
</style>
